<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-alert :closable="false" description="温馨提示：交易手续费只做参考，不做对账凭证。" type="success" />
    </div>
    <el-divider border-style="double" />

    <el-form v-show="showSearch" ref="queryRef" :inline="true" :label-position="'left'" :model="queryParams" label-width="100px">
      <el-form-item label="日期:">
        <el-radio-group v-model="dayRadio">
          <el-radio-button label="1" @change="TodayData(0)">今天</el-radio-button>
          <el-radio-button label="2" @change="TodayData(-3)">近三天</el-radio-button>
          <el-radio-button label="3" @change="TodayData(-7)">近七天</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dateRange" end-placeholder="结束日期" range-separator="-" start-placeholder="开始日期" type="daterange" value-format="YYYY-MM-DD" />
      </el-form-item>
      <br />

      <el-form-item label="支付类型" prop="payType">
        <el-select style="width: 230px" v-model="queryParams.payType" clearable placeholder="请选择支付类型">
          <el-option v-for="dict in laiqianle_pay_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="交易状态" prop="payStatus">
        <el-select style="width: 230px" v-model="queryParams.payStatus" clearable placeholder="请选择支付状态">
          <el-option v-for="dict in pay_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="交易类型" prop="payStatus">
        <el-select style="width: 230px" v-model="queryParams.tradeType" clearable placeholder="请选择交易类型">
          <el-option v-for="dict in laiqianle_trade_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备类型" prop="payFacilityType">
        <el-select style="width: 230px" v-model="queryParams.payFacilityType" clearable placeholder="请选择付款设备类型">
          <el-option v-for="dict in device_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="交易单号" prop="dealNo">
        <el-input style="width: 230px" v-model="queryParams.dealNo" clearable placeholder="请输入交易单号" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="设备SN" prop="deviceSn">
        <el-input style="width: 230px" v-model="queryParams.deviceSn" clearable placeholder="请输入设备sn" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="商户名称" prop="merchantName">
        <el-input style="width: 230px" v-model="queryParams.merchantName" clearable placeholder="请输入商户名称" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="外部商户号" prop="organizationMerchantNo">
        <el-input style="width: 230px" v-model="queryParams.organizationMerchantNo" clearable placeholder="请输入外部商户号" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item label="商户号" prop="merchantNo">
        <el-input style="width: 230px" v-model="queryParams.merchantNo" clearable placeholder="请输入商户号" @keyup.enter="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!--        <el-button v-hasPermi="['deal:deal:export']" icon="Download" plain type="warning" @click="handleExport">导出-->
        <!--        </el-button>-->
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="handleRefresh" />
    </el-row>

    <div class="merchant">
      <div class="merchant_1">
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">{{ totalAll.payPriceDe }}</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">交易总笔数(笔)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">{{ totalAll.countPay }}</div>
        </div>
        <div class="merchant_2" style="border-right: 1px dashed #ddd">
          <div class="merchant_3">笔均金额(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(123, 201, 249)">{{ totalAll.avgPayDe }}</div>
        </div>
        <div class="merchant_2">
          <div class="merchant_3">交易总手续费(元)</div>
          <div class="merchant_3" style="font-size: 26px; color: rgb(79, 201, 176)">{{ totalAll.ratePriceDe }}</div>
        </div>
      </div>
    </div>
    <el-table v-loading="loading" :data="dealList" @selection-change="handleSelectionChange">
      <el-table-column align="center" fixed="left" type="selection" />
      <el-table-column align="center" fixed="left" prop="dealNo">
        <template #header>
          <p>交易流水号</p>
          <p>外部交易流水号</p>
        </template>
        <template #default="scope">
          <p>{{ scope.row.dealNo }}</p>
          <p>{{ scope.row.tradeId }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="dealNo">
        <template #header>
          <p>外部商户号</p>
          <p>商户名称</p>
        </template>
        <template #default="scope">
          <p>{{ scope.row.organizationMerchantNo }}</p>
          <p>{{ scope.row.merchantName }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="dealNo">
        <template #header>
          <p>商户号</p>
          <p>设备SN</p>
        </template>
        <template #default="scope">
          <p>{{ scope.row.merchantNo }}</p>
          <p>{{ scope.row.deviceSn }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="dealNo">
        <template #header>
          <p>外部设备号</p>
          <p>外部终端号</p>
        </template>
        <template #default="scope">
          <p>{{ scope.row.outDeviceSn }}</p>
          <p>{{ scope.row.outTerminalNo }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="dealNo">
        <template #header>
          <p>交易金额</p>
          <p>交易时间</p>
        </template>
        <template #default="scope">
          <p>
            <span v-if="scope.row.symbol == 0" style="color: #ff6600"> ￥ - {{ scope.row.payPriceDe }} </span>
            <span v-else-if="scope.row.symbol == 1" style="color: #ff6600">
              ￥ {{ scope.row.payPriceDe }}
              <!--                <span v-if="scope.row.tradeType == 1 && scope.row.payStatus == 2">-->
              <!--                  /-->
              <!--                                    <el-button type="text" @click="refundAction(scope.row)">退款</el-button>-->
              <!--                                    <el-button type="text" @click="handleUpdate(scope.row)">部分退款</el-button>-->
              <!--                </span>-->
              <!--                <span v-if="scope.row.tradeType == 4 && scope.row.payStatus == 2">-->
              <!--                  /-->
              <!--                  <el-button type="text" @click="unfreezingAction(scope.row)">预授权撤销</el-button>-->
              <!--                </span>-->
              <!--                <span v-if="scope.row.tradeType == 5 && scope.row.payStatus == 2">-->
              <!--                  /-->
              <!--                  <el-button type="text" @click="deductrefundAction(scope.row)">预授权完成退款</el-button>-->
              <!--                </span>-->
            </span>
          </p>
          <p>{{ scope.row.createTime }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="dealNo">
        <template #header>
          <p>实收金额</p>
          <p>交易手续费</p>
        </template>
        <template #default="scope">
          <p>
            <span v-if="scope.row.symbol == 0" style="color: #ff6600"> - ￥ {{ (scope.row.payPriceDe - scope.row.ratePriceDe).toFixed(2) }} </span>

            <span v-if="scope.row.symbol == 1" style="color: #ff6600"> ￥ {{ (scope.row.payPriceDe - scope.row.ratePriceDe).toFixed(2) }} </span>
          </p>
          <p>
            <span v-if="scope.row.symbol == 0" style="color: #ff6600"> - ￥ {{ scope.row.ratePriceDe || '--' }} </span>

            <span v-if="scope.row.symbol == 1" style="color: #ff6600"> ￥ {{ scope.row.ratePriceDe || '--' }} </span>
          </p>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" prop="dealNo">
        <template #header>
          <p>交易类型</p>
          <p>交易状态</p>
        </template>
        <template #default="scope">
          <p>
            <dict-tag :options="laiqianle_trade_type" :value="scope.row.tradeType" />
          </p>

          <p>
            <dict-tag :options="pay_status" :value="scope.row.payStatus" />
          </p>
          <p v-if="scope.row.payStatus == 5" style="color: red">
            {{ scope.row.msg }}
          </p>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" prop="payStatus">
        <template #default="scope">
          <el-button icon="message" type="text" @click="handleUpdate(scope.row)">详情</el-button>
          <el-button icon="message" type="text" @click="handQuery(scope.row)">查看商户信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total" @pagination="getList" />

    <!-- 添加或修改设备申领对话框 -->
    <el-dialog v-model="open" :title="title" append-to-body width="1000px">
      <el-descriptions :column="3" border class="margin-top" title="交易详情">
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易流水号</div>
          </template>
          {{ form.dealNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 外部交易流水号</div>
          </template>
          {{ form.tradeId }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 源交易号</div>
          </template>
          {{ form.sourceTradeId || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易类型</div>
          </template>
          <dict-tag :options="laiqianle_trade_type" :value="form.tradeType" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 支付类型</div>
          </template>
          <dict-tag :options="laiqianle_pay_type" :value="form.payType" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易状态</div>
          </template>
          <dict-tag :options="pay_status" :value="form.payStatus" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户名称</div>
          </template>
          {{ form.merchantName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户号</div>
          </template>
          {{ form.merchantNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 外部商户号</div>
          </template>
          {{ form.organizationMerchantNo }}
        </el-descriptions-item>

        <el-descriptions-item span="2">
          <template #label>
            <div class="cell-item"> 设备号</div>
          </template>
          {{ form.deviceSn }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 设备类型</div>
          </template>
          <dict-tag :options="device_type" :value="form.payFacilityType" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易金额</div>
          </template>
          ￥ {{ form.payPriceDe }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易手续费</div>
          </template>
          ￥ {{ form.ratePriceDe }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 交易时间</div>
          </template>
          {{ form.createTime }}
        </el-descriptions-item>

        <el-descriptions-item span="3">
          <template #label>
            <div class="cell-item"> 交易备注</div>
          </template>
          {{ form.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <!--      <template #footer>-->
      <!--        <div class="dialog-footer">-->
      <!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
      <!--          <el-button @click="cancel">取 消</el-button>-->
      <!--        </div>-->
      <!--      </template>-->
    </el-dialog>
    <!-- 查看详情 -->
    <el-dialog v-if="fromData" v-model="openQuery" :title="titles" append-to-body width="1000px">
      <el-descriptions :column="3" border class="margin-top" title="商户详情">
        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户名称</div>
          </template>
          {{ fromData.commercialTenantName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户编号</div>
          </template>
          {{ fromData.commercialTenantNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户手机号</div>
          </template>
          {{ fromData.commercialTenantPhone }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户类型</div>
          </template>
          <dict-tag :options="commercial_tenant_state" :value="fromData.commercialTenantState" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 邮件</div>
          </template>
          {{ fromData.commercialTenantEmil }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 贷记卡费率</div>
          </template>
          {{ fromData.commercialCardpayFeeRate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 借记卡费率</div>
          </template>
          {{ fromData.commercialCardpayDebitRate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 封顶值</div>
          </template>
          {{ fromData.commercialCardpayDebitCap }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 扫码优惠费率</div>
          </template>
          {{ fromData.commercialPreferstageFeerate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 微信费率</div>
          </template>
          {{ fromData.commercialWxpayFeerate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 支付宝费率</div>
          </template>
          {{ fromData.commercialAlipayFeerate }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 外部商户号</div>
          </template>
          {{ fromData.outmerchantno }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 商户状态</div>
          </template>
          {{ fromData.status }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 登录名称</div>
          </template>
          {{ fromData.nickName }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 最后登录IP</div>
          </template>
          {{ fromData.loginIp }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item"> 最后登录时间</div>
          </template>
          {{ fromData.loginDate }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script name="Deal" setup>
  import { addDeal, delDeal, getDeal, getListData, getListstatistics, getMerTotal, listDeal, updateDeal } from '@/api/deal/deal';
  import { getCurrentInstance, reactive, ref, toRefs, watch, onActivated } from 'vue';
  import { useRouter } from 'vue-router';
  import { dayjs, ElMessageBox } from 'element-plus';
  import { isWithinOneMonth } from '@/utils/index';

  const { proxy } = getCurrentInstance();
  const { pay_status, device_type, laiqianle_pay_type, laiqianle_trade_type, symbol_type } = proxy.useDict(
    'pay_status',
    'device_type',
    'laiqianle_pay_type',
    'laiqianle_trade_type',
    'symbol_type',
  );
  const { commercial_tenant_state } = proxy.useDict('commercial_tenant_state');

  const dealList = ref([]);
  const open = ref(false);
  const openQuery = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref('');
  const titles = ref('');
  const dateRange = ref([]);
  const fromData = ref({});
  const dayRadio = ref(1);

  const tableList = ref([]);
  const tableData = ref();
  const tableTotal = ref();
  const totalAll = ref({
    avgPay: null,
    avgPayDe: null,
    countPay: null,
    payPrice: null,
    payPriceDe: null,
    ratePrice: null,
    ratePriceDe: null,
  });
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      dealNo: null,
      organizationType: null,
      organizationMerchantNo: null,
      organizationOuttransid: null,
      tenantId: null,
      merchantNo: null,
      payPrice: null,
      payStatus: '2',
      payFacilityType: null,
      payType: null,
      tradeType: '1',
      deviceSn: null,
      actualPrice: null,
      ratePrice: null,
      rate: null,
      listType: 'mer',
    },
    rules: {
      organizationMerchantNo: [{ required: true, message: '机构商户号不能为空', trigger: 'blur' }],
      tenantId: [{ required: true, message: '商户id不能为空', trigger: 'blur' }],
    },

    refundData: {
      outTransId: null,
      sn: null,
      tradeMoney: null,
      tradeRemark: null,
    },
  });
  const { refundData, queryParams, form, rules } = toRefs(data);

  /** 查询交易记录列表 */
  function getList() {
    loading.value = true;
    listDeal(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
      dealList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    });
  }

  const oneDaya = ref(null);
  const today = ref(null);
  const twoDaya = ref(null);
  const dayList = ref(null);

  function TodayData(day) {
    today.value = new Date();
    var targetday_milliseconds = today.value.getTime() + 1000 * 60 * 60 * 24 * day;
    today.value.setTime(targetday_milliseconds);
    var tYear = today.value.getFullYear();
    var tMonth = today.value.getMonth();
    var tDate = today.value.getDate();
    var tHours = today.value.getHours();
    var tMinutes = today.value.getMinutes();
    var tSeconds = today.value.getSeconds();
    tMonth = doHandleMonth(tMonth + 1);
    tDate = doHandleMonth(tDate);
    tHours = doHandleMonth(tHours);
    tMinutes = doHandleMonth(tMinutes);
    tSeconds = doHandleMonth(tSeconds);
    oneDaya.value = tYear + '-' + tMonth + '-' + tDate;
    dayList.value = new Date();
    var thYear = dayList.value.getFullYear();
    var thMonth = dayList.value.getMonth();
    var thDate = dayList.value.getDate();
    var thHours = dayList.value.getHours();
    var thMinutes = dayList.value.getMinutes();
    var thSeconds = dayList.value.getSeconds();
    thMonth = doHandleMonth(thMonth + 1);
    thDate = doHandleMonth(thDate);
    thHours = doHandleMonth(thHours);
    thMinutes = doHandleMonth(thMinutes);
    thSeconds = doHandleMonth(thSeconds);
    twoDaya.value = thYear + '-' + thMonth + '-' + thDate;

    if (day === 0) {
      dateRange.value = [oneDaya.value, twoDaya.value];
    } else if (day === -3) {
      dateRange.value = [oneDaya.value, twoDaya.value];
      console.log(dateRange);
    } else if (day === -7) {
      dateRange.value = [oneDaya.value, twoDaya.value];
    } else {
      dateRange.value = [router.currentRoute.value.query.beginTime, router.currentRoute.value.query.endTime];
      dayRadio.value = null;
    }
    // getListTotal();
    getList();
    getTotal();
  }

  function doHandleMonth(month) {
    var m = month;
    if (month.toString().length == 1) {
      m = '0' + month;
    }
    return m;
  }

  // 取消按钮
  function cancel() {
    open.value = false;
    reset();
  }

  function getTotal() {
    getMerTotal(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
      totalAll.value = res.data;
      console.log(totalAll.value);
    });
  }
  // 表单重置
  function reset() {
    form.value = {
      id: null,
      dealNo: null,
      organizationType: null,
      organizationMerchantNo: null,
      organizationOuttransid: null,
      tenantId: null,
      merchantNo: null,
      payPrice: null,
      payStatus: 0,
      payFacilityType: null,
      payType: null,
      deviceSn: null,
      actualPrice: null,
      ratePrice: null,
      rate: null,
      createTime: null,
      createBy: null,
      updateBy: null,
      updateTime: null,
      delFlag: null,
    };
    proxy.resetForm('dealRef');
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    if (dateRange.value === null || !isWithinOneMonth(dateRange.value[0], dateRange.value[1])) {
      ElMessageBox.alert('查询周期不能超过一个月', '警告', {
        confirmButtonText: '确定',
        callback: () => {
          return;
        },
      });
      return;
    }
    queryParams.value.pageNum = 1;
    getList();
    getTotal();
  }

  /** 重置按钮操作 */

  function resetQuery() {
    proxy.resetForm('queryRef');
    dayRadio.value = '1';
    dateRange.value = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
    handleQuery();
    getTotal();
  }

  // 多选框选中数据
  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset();
    open.value = true;
    title.value = '添加交易记录';
  }
  /**
   * @description: 刷新按钮
   * @date 2023-09-20 12:15
   */
  function handleRefresh() {
    getList();
    getTotal();
  }

  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value;
    getDeal(_id).then((response) => {
      form.value = response.data;
      open.value = true;
      title.value = '交易记录详情';
    });
  }

  function handQuery(row) {
    reset();
    console.log(row);
    const _ids = row.tenantId;
    getListData(_ids).then((response) => {
      console.log(response);
      fromData.value = response.data;
      openQuery.value = true;
      titles.value = '查看商户详情';
    });
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs['dealRef'].validate((valid) => {
      if (valid) {
        if (form.value.id != null) {
          updateDeal(form.value).then((response) => {
            proxy.$modal.msgSuccess('修改成功');
            open.value = false;
            getList();
            getTotal();
          });
        } else {
          addDeal(form.value).then((response) => {
            proxy.$modal.msgSuccess('新增成功');
            open.value = false;
            getList();
            getTotal();
          });
        }
      }
    });
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal
      .confirm('是否确认删除交易记录编号为"' + _ids + '"的数据项？')
      .then(function () {
        return delDeal(_ids);
      })
      .then(() => {
        getList();
        getTotal();
        proxy.$modal.msgSuccess('删除成功');
      })
      .catch(() => {});
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download(
      'deal/deal/export',
      {
        ...queryParams.value,
      },
      `交易记录_${new Date().getTime()}.xlsx`,
    );
  }

  /** 退款 */

  function refundAction(data) {
    refundData.value.outTransId = data.dealNo;
    refundData.value.sn = data.deviceSn;
    refundData.value.tradeMoney = data.payPrice;
    refundData.value.tradeRemark = '平台退款';
    refund(refundData.value).then(() => {
      getList();
      getTotal();
      proxy.$modal.msgSuccess('退款成功');
    });
  }

  function unfreezingAction(data) {
    refundData.value.outTransId = data.dealNo;
    refundData.value.sn = data.deviceSn;
    refundData.value.tradeMoney = data.payPrice;
    refundData.value.tradeRemark = '平台撤销';
    unfreezing(refundData.value).then(() => {
      getList();
      getTotal();
      proxy.$modal.msgSuccess('退款成功');
    });
  }

  function deductrefundAction(data) {
    refundData.value.outTransId = data.dealNo;
    refundData.value.sn = data.deviceSn;
    refundData.value.tradeMoney = data.payPrice;
    refundData.value.tradeRemark = '平台预授权退款';
    deductrefund(refundData.value).then(() => {
      getList();
      getTotal();
      proxy.$modal.msgSuccess('退款成功');
    });
  }

  const router = useRouter();
  // let detailId = proxy.query.eqCode
  console.log(router.currentRoute.value.query);
  queryParams.value.deviceSn = router.currentRoute.value.query.eqCode;

  function getListTotal() {
    getListstatistics(proxy.addDateRange(queryParams.value, dateRange.value)).then((res) => {
      tableList.value = res.data.list;
      tableData.value = res.data.totalData;
      tableTotal.value = res.data.total;
    });
  }

  // TodayData(0);
  onActivated(() => {
    if (router.currentRoute.value.query.endTime !== undefined) {
      TodayData(-1);
    } else {
      TodayData(0);
    }
  });
  // getListTotal();
  // getList();
  watch(
    [() => queryParams.value.deviceSn],
    (newVal, oldVal) => {
      // console.log('newVal',newVal)
      // console.log('oldVal',oldVal)
      localStorage.setItem('deviceSn', newVal);
    },
    { immediate: true },
  );
</script>

<style lang="scss" scoped>
  .merchant {
    margin: 10px;

    .title {
      display: flex;
      align-items: center;
      padding-top: 16px;
      padding-left: 16px;

      .bar {
        width: 4px;
        height: 20px;
        background-color: #409eff;
        margin-right: 10px;
      }

      .text {
        font-size: 16px;
        color: #333;
      }
    }

    .merchant_1 {
      width: 100%;
      height: 110px;
      background: beige;
      border-bottom: 1px dashed #ddd;
      margin: 10px 0;
      border-top: 1px dashed #ddd;
      background: #fafafa;
      display: flex;

      .merchant_2 {
        flex: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: center;
        margin: 10px 0;
      }

      .merchant_3 {
        display: block;
        height: 30px;
        margin-bottom: 5px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        color: #666;
      }
    }

    .demo-pagination-block {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
  }
</style>
